<template>
  <view class="bank-list-container">
    <view class="list">
      <u-cell-group>
        <u-cell
          v-for="item in bankList"
          :key="item.id"
          :title="item.bank_name"
          :value="maskBankCode(item.code)"
          isLink
          @click="handleBankDetail(item.id)"
        >
          <template #icon>
            <u-icon name="rmb-circle" size="20"></u-icon>
          </template>
        </u-cell>
      </u-cell-group>

      <u-loadmore
        :status="loadStatus"
        :icon-type="iconType"
        :load-text="loadText"
      />
    </view>

    <view class="add-btn">
      <u-button type="primary" @click="handleAddBank">添加银行卡</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getBankList } from "@/common/apis/user.js";

const bankList = ref([]);
const loadStatus = ref("loadmore");
const iconType = ref("circle");
const loadText = ref({
  loadmore: "上拉加载更多",
  loading: "正在加载...",
  nomore: "没有更多了",
});

async function fetchBankList() {
  loadStatus.value = "loading";
  try {
    const response = await getBankList();
    bankList.value = response;
    loadStatus.value = "nomore";
  } catch (error) {
    console.error(error);
    loadStatus.value = "loadmore";
  }
}

function maskBankCode(code) {
  if (!code) return "";
  return `**** **** **** ${code.slice(-4)}`;
}

function handleBankDetail(id) {
  uni.navigateTo({
    url: `/pages/user/bank/detail?id=${id}`,
  });
}

function handleAddBank() {
  uni.navigateTo({
    url: "/pages/user/bank/add",
  });
}

onMounted(() => {
  fetchBankList();
});
</script>

<style lang="scss" scoped>
.bank-list-container {
  padding: 20rpx;

  .list {
    margin-bottom: 100rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
  }

  .add-btn {
    position: fixed;
    bottom: 40rpx;
    left: 20rpx;
    right: 20rpx;
  }
}
</style>
